<template>
  <el-main class="elmain">
    <div class="flex" style="justify-content:space-between;height:30px;background:#f0f;padding:20px 0">
      <el-input placeholder="请输入内容" v-model="input4" style="width:250px;height:30px;">
        <template slot="append">搜索</template>
      </el-input>
      <el-button type="primary" style="height:30px;padding:4px 17px;">新增员工</el-button>
    </div>
    <el-container style="flex-direction: column;background:#fff;">
      <el-table :data="tableData3"  style="width: 100%;flex:none;margin-bottom:76px;">
        <el-table-column label="选择" fit align="center">
          <template slot-scope="scope">
            <el-checkbox></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
          align="center"
          fit>
        </el-table-column>
        <el-table-column
          prop="name"
          label="职务"
          align="center"
          fit>
        </el-table-column>
        <el-table-column
          label="入职日期"
          align="center"
          fit>
          <template slot-scope="scope">{{ scope.row.date }}</template>
        </el-table-column>
        <el-table-column
          prop="name"
          label="状态"
          align="center"
          fit>
        </el-table-column>
        <el-table-column
          prop="name"
          label="联系方式"
          align="center"
          fit>
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
          fit>
          <template slot-scope="scope">
            <span style="margin-right:5px;" @click="handleEdit(scope.$index, scope.row)"><i class="icon iconfont icon-htmal5icon16" style="color:#000;"></i></span>
            <span @click="handleDelete(scope.$index, scope.row)"><i class="icon iconfont icon-shanchu" style="color:#000;"></i></span>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <el-pagination layout="prev, pager, next" :total="50" background>
        </el-pagination>
      </div>
    </el-container>
  </el-main>
</template>

<script>
    export default {
        name: "staff-lists",
      data () {
        return {
          tableData3: [{
            date: '2016-05-03',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-02',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-04',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-01',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-08',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-06',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }, {
            date: '2016-05-07',
            name: '王小虎',
            address: '上海市普陀区金沙江路 1518 弄'
          }],
          multipleSelection: [],
          input4: '',
        }
      },
      methods: {
        handleOpen(key, keyPath) {
          console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
          console.log(key, keyPath);
        },
        handleDelete(index, row) {
          console.log(index, row);
        },
        handleEdit(index, row) {
          console.log(index, row);
          this.$router.push({name: 'staffEdit'});
        },
        toggleSelection(rows) {
          if (rows) {
            rows.forEach(row => {
              this.$refs.multipleTable.toggleRowSelection(row);
            });
          } else {
            this.$refs.multipleTable.clearSelection();
          }
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        }
      }
    }
</script>

<style lang="scss">
  .elmain{
    display:flex;
    flex-direction: column;
    padding-top:0;
    background:blue;
    .manage{
      width: 58px;
      height: 18px;
      display:inline-block;
      text-align: center;
      line-height: 18px;
      background: #ff5650;
      border-radius:2px;
      font-size:12px;
      color:#fff;

    }
    .el-header{

    }
    .btn-prev,.btn-next{
      background:#fff!important;
      margin:0!important;
      border:1px solid #e3e3e3!important;
    }
    .btn-next{
      border-left:0!important;
    }

    .number{
      margin:0!important;
      border:1px solid #e3e3e3!important;
      border-left:0!important;
      border-radius: 0!important;
      background: #fff!important;
    }
    .active{
      background:#343745!important;
    }

    input{
      height:30px!important;
      line-height:30px!important;
    }
  }
</style>
